<template>
  <div class="right-panel">
    <div class="property-panel">
      <!-- 模板名称 -->
      <div class="panel-item">
        <div class="panel-title">
          修改模板名称
        </div>
        <div class="panel-content">
          <div class="template-name-input">
            <span>模板名称:</span>
            <el-input v-model="localTemplateName" size="small" placeholder="设置模板名称"></el-input>
          </div>
        </div>
      </div>
      
      <!-- 图片上传组件 -->
      <ImageUploader 
        :has-background="hasBackground"
        :network-image-url="networkImageUrl"
        :opacity="backgroundOpacity"
        :edit-mode="backgroundEditMode"
        @add-network-image="handleNetworkImage"
        @add-local-image="handleLocalImage"
        @remove-background="removeBackground"
        @update-opacity="updateBackgroundOpacity"
        @toggle-edit-mode="toggleBackgroundEditMode"
      />
      
      <!-- 纸张设置组件 -->
      <PaperSettings 
        :width="paperWidth"
        :height="paperHeight"
        :px-per-mm="pxPerMm"
        :direction="paperDirection"
        :border-type="paperBorderType"
        @apply-settings="applyPaperSettings"
      />
      
      <!-- 打印项目组件 -->
      <PrintItemsPanel 
        :template-type="templateType"
        @field-selected="handleFieldSelected"
        @field-unselected="handleFieldUnselected"
        @add-section-title="handleSectionTitle"
        @add-table="handleAddTable"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue';
import { useRoute } from 'vue-router';
import ImageUploader from './ImageUploader.vue';
import PaperSettings from './PaperSettings.vue';
import PrintItemsPanel from './PrintItemsPanel.vue';

// 获取路由对象
const route = useRoute();

// 获取URL中的type参数
const printType = computed(() => {
  return route.query.type || 'product';
});

const props = defineProps({
  templateName: {
    type: String,
    default: ''
  },
  templateType: {
    type: String,
    default: 'product'
  },  
  paperWidth: {
    type: Number,
    required: true
  },
  paperHeight: {
    type: Number,
    required: true
  },
  pxPerMm: {
    type: Number,
    required: true
  },
  paperDirection: {
    type: String,
    default: '打印机默认设置'
  },
  paperBorderType: {
    type: String,
    default: '实际纸张边缘'
  },
  hasBackground: {
    type: Boolean,
    default: false
  },
  networkImageUrl: {
    type: String,
    default: ''
  },
  backgroundOpacity: {
    type: Number,
    default: 100
  },
  backgroundEditMode: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits([
  'update:template-name',
  'add-network-image',
  'add-local-image',
  'remove-background',
  'apply-paper-settings',
  'field-selected',
  'field-unselected',
  'add-section-title',
  'delete-selected',
  'upload-background',
  'clear-canvas',
  'update-opacity',
  'toggle-edit-mode'
]);

// 本地状态
const localTemplateName = ref(props.templateName);

// 监听模板名更新
watch(() => props.templateName, (newVal) => {
  localTemplateName.value = newVal;
});

// 监听本地模板名变化
watch(localTemplateName, (newVal) => {
  emit('update:template-name', newVal);
});

// 处理网络图片
const handleNetworkImage = (url) => {
  console.log('PropertyPanel: 处理网络图片, URL:', url);
  emit('add-network-image', url);
};

// 处理本地图片
const handleLocalImage = (file) => {
  console.log('PropertyPanel: 处理本地图片上传, 文件:', file?.name);
  emit('upload-background', file);
};

// 移除背景
const removeBackground = () => {
  console.log('PropertyPanel: 移除背景图片');
  emit('remove-background');
};

// 应用纸张设置
const applyPaperSettings = (settings) => {
  emit('apply-paper-settings', settings);
};

// 处理字段选择
const handleFieldSelected = (fieldConfig) => {
  emit('field-selected', fieldConfig);
};

// 处理字段取消选择
const handleFieldUnselected = (key) => {
  emit('field-unselected', key);
};

// 处理添加分区标题
const handleSectionTitle = (titleConfig) => {
  emit('add-section-title', titleConfig);
};

// 处理添加表格
const handleAddTable = () => {
  emit('add-table');
};  

// 更新背景透明度
const updateBackgroundOpacity = (opacity) => {
  console.log('PropertyPanel: 更新背景透明度, 透明度:', opacity);
  emit('update-opacity', opacity);
};

// 切换背景编辑模式
const toggleBackgroundEditMode = (value) => {
  console.log('PropertyPanel: 切换背景编辑模式, 状态:', value);
  emit('toggle-edit-mode', value);
};
</script>

<style lang="scss" scoped>
@use '../styles/designer.scss';
@use '../styles/property-panel.scss';
</style>